<template>
    <div class="page-header">
        <div class="title">Learn words</div>
        <div class="nav-box">
            <nav class="header-nav">
                <div>
                    <span>{{state.wordTypeName}}</span>
                </div>
                <div title="朗读模式" @click="changeState('isAudio', !state.isAudio)">
                    <i v-if="state.isAudio" class="bi bi-volume-up blue"></i>
                    <i v-else class="bi bi-volume-mute"></i>
                </div>
				<div title="错题本" @click="toJump('errorWords')">
					<i class="bi bi-book-half blue"></i>
				</div>
				<!-- <div title="默写模式">
					<i v-if="state.eyeStatus" class="bi bi-eye-fill blue"></i>
					<i v-else class="bi bi-eye-slash-fill"></i>
					<div class="tip-box" v-if="data.eyeClick">
						<div class="write-type" :class="{disabled: state.eyeStatus}">
						    <button type="button" class="btn btn-light" @click="changeBtnSelectShow">{{state.writeType == 1 ? state.wordTypeName : '中文'}}默写</button>
						    <div class="write-type-list" v-if="btnSelectShow">
						        <span :class="{active: state.writeType == 1}" @click="writeFun(1)">{{state.wordTypeName}}默写</span>
						        <span :class="{active: state.writeType != 1}" @click="writeFun(2)">中文默写</span>
						    </div>
						</div>
					</div>
				</div> -->
				<div>
					<el-popover
					  placement="bottom"
					  width="200"
					  trigger="click">
						<el-switch
						v-model="state.eyeStatus"
						active-text="开关默写模式"
						inactive-text="">
						</el-switch>
						<el-radio :disabled="state.eyeStatus" v-model="state.writeType" label="1">韩文</el-radio>
						<el-radio :disabled="state.eyeStatus" v-model="state.writeType" label="2">中文</el-radio>
					  <template #reference>
						  <i v-if="state.eyeStatus" class="bi bi-eye-fill blue"></i>
						  <i v-else class="bi bi-eye-slash-fill"></i>
					  </template>
					</el-popover>
				</div>
                <div>
					<el-button type="primary" @click="reset">reset</el-button>
                </div>
            </nav>
        </div>
    </div>
</template>
<script setup>
import { ref, computed, onMounted, reactive } from 'vue'
const btnSelectShow = ref(false);
const data = reactive({
	eyeClick: false
})
const state = computed(() => {
    return $store.state
})
const startFun = () => {
    $store.dispatch('startAction')
}
const reset = () => {
    $store.dispatch('reset')
}
const changeState = (name, value) => {
    console.log('changeState', name, value)
    $store.dispatch('changeState', name, value)
}
const changeBtnSelectShow = () => {
    btnSelectShow.value = !btnSelectShow.value
}
const writeFun = (type) => {
    $store.dispatch('changeWriteType', type)
    btnSelectShow.value = false
}
const toJump = (path) => {
	$router.push('/errorWords');
}
onMounted(reset)
</script>
<style lang="less" scoped>
.page-header {
    padding: 1.5rem 2.5rem;
    color: #409eff;   
    display: flex;
    flex-direction: row;
    justify-content: space-between; 
    flex-wrap: wrap;
    .nav-box {
        flex: 1;
        display: flex;
        flex-direction: row-reverse;
    }
    .title {
        font-size: 2rem;
        font-weight: bold;
    }
    .header-nav {
        color: #999;
        margin-left: 0.6rem;
        box-shadow: 0 100px 80px #322e8112, 0 41.7776px 33.4221px #322e810d, 0 22.3363px 17.869px #322e810b, 0 12.5216px 10.0172px #322e8109, 0 6.6501px 5.32008px #322e8107, 0 2.76726px 2.21381px #322e8105;
        display: flex;
        flex-direction: row;
        background-color: #ffffff;
        border-radius: 1rem;
		white-space: nowrap;
		padding: 10px 10px;
        >div {
            display: flex;
            align-items: center;
            justify-content: center;
            min-width: 4rem;
            cursor: pointer;
			position: relative;
            i {
                cursor: pointer;
            }
			.tip-box {
				position: absolute;
				top: 100%;
				left: 50%;
				transform: translateX(-50%);
			}
        }
        .write-type {
            position: relative;
            padding: 0 10px;
            .disabled {
                text-decoration: line-through;
                cursor: not-allowed!important;
            }
            .write-type-list {
                // display: none;
                width: 100%;
                position: absolute;
                top: 110%;
                left: 50%;
                transform: translateX(-50%);
                display: flex;
                flex-direction: column;
                background-color: #ffffff;
                text-align: center;
                box-shadow: 0 0 2px #cccccc;
                border-radius: 5px;
                span.active {
                    color: #409eff;
                }
            }
        }
    }
    .ml-12 {
        margin-left: 0.24rem;
    }
    .blue {
        color: #409eff;
    }
	@media (max-width: 600px) {
		.title {
			width: 100%;
			text-align: center;
		}
		.nav-box {
			width: 100%;
			text-align: center;
			justify-content: center;
			.header-nav {
				padding: 10px 30px;
			}
		}
	}
}

</style>